<template>
	<view class="content">
		<ZPaging
		    ref="paging"
		    v-model="list"
			:auto="false"
		    
			system-loading-text="Loading"
			loading-more-no-more-text="沒有更多了"
			loading-more-default-text="點擊加載更多"
			loading-more-loading-text="正在加載..."
			loading-more-fail-text="加載失敗,點擊重新加載"
			empty-view-text="沒有數據哦~"
			refresher-default-text="繼續下拉刷新"
			refresher-pulling-text="鬆開立即刷新"
			refresher-refreshing-text="正在刷新"  
			empty-view-reload-text="重新加載"
			empty-view-error-text="加載失敗"
		    @query="queryList"
		>
		     <template #top>
				<view class="navbox">
					<u-subsection :list="nav" bg-color="#fff" button-color="#fff" v-model="current"
						@change="changeNav"
					></u-subsection>
				</view>
				<view class="widths search">
					<u-search v-model="keyword" :show-action="false" :clearabled="false" :animation="true" placeholder="Search" @search="toSearch"></u-search>
				</view>
		    </template>
		    <template #default>
		
		        <view class="widths list">
					<view v-for="(v,k) in list" :key="k">
						<u-swipe-action
							v-if="ident==1"
							:show="v.show"
							:index="k"
							bg-color="#fff"
							:options="options"
							:disabled="v.disabled"
							@open="open"
							@click="swipeAction"
						>
							<view class="flex items">
								<view class="left">
									<view class="f32 mb-4 bold name">{{v.name}}</view>
									<view class="f26 c999 company">{{v.company}}</view>
								</view>
								
								<view class="right">
									<view class="acbox" v-if="current===3">
										<view class="center f24 cfff btn" @click.stop="showAction(v)">設定權限</view>
									</view>
									<view class="job" v-else>
										<view class="acbox" v-if="v.ident==1 && userPageActionType=='admin'">
											<view class="center f24 cfff btn" v-if="!v.isIn" @click.stop="inOutCase('in',v.id,v.companyid)">加入專案</view>
											<view class="center f24 cfff btn" v-else @click.stop="inOutCase('out',v.id,v.companyid)">已加入專案</view>
										</view>
										<view class="" v-else>
											<text v-if="v.ident==1 && userPageActionType=='action'"  @click="showMemberInfo(v.id,v.ident,v.companyid)" class="c007aff bold">{{current===2?'Manager':current===0?'Designer':current===1?'Client':''}}</text>
											<text v-else="v.ident!=1 && userPageActionType=='action'" class="c007aff bold">{{current===2?'Manager':current===0?'Designer':current===1?'Client':''}}</text>
										</view>
									</view>
								</view>
							</view>
						</u-swipe-action>
						<view v-else class="flex items">
							<view class="left">
								<view class="f32 mb-4 bold name">{{v.name}}</view>
								<view class="f26 c999 company">{{v.company}}</view>
							</view>
							
							<view class="right">
								<view class="acbox" v-if="current===3">
									<view class="center f24 cfff btn" @click.stop="showAction(v)">設定權限</view>
								</view>
								<view class="job" v-else>
									<view class="acbox" v-if="v.ident==1 && userPageActionType=='admin'">
										<view class="center f24 cfff btn" v-if="!v.isIn" @click.stop="inOutCase('in',v.id,v.companyid)">加入專案</view>
										<view class="center f24 cfff btn" v-else @click.stop="inOutCase('out',v.id,v.companyid)">已加入專案</view>
									</view>
									<view class="" v-else>
										<text v-if="v.ident==1 && userPageActionType=='action'"  @click="showMemberInfo(v.id,v.ident,v.companyid)" class="c007aff bold">{{current===2?'Manager':current===0?'Designer':current===1?'Client':''}}</text>
										<text v-else="v.ident!=1 && userPageActionType=='action'" class="c007aff bold">{{current===2?'Manager':current===0?'Designer':current===1?'Client':''}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					
		        </view>
		
		    </template>
		 </ZPaging>
		 <Tabar></Tabar>
		 <u-action-sheet z-index="10078" :list="actionList" :cancel-btn="false" :safe-area-inset-bottom="true" :tips="tips" v-model="actionShow"
			@click="selectAction"
		 ></u-action-sheet>
		 <u-modal z-index="10078" v-model="confirmTips" title="提示" :content="tipContent"
			:show-cancel-button="true" :mask-close-able="true"
			@confirm="setUser"
		 ></u-modal>
		 
		 <!-- 刪除 -->
		  <u-modal v-model="delshow" :mask-close-able="true" :show-cancel-button="true" title="確認刪除該用戶嗎？" content="刪除后不可恢復" @confirm="delUserById"></u-modal>
		  
		 <u-popup v-model="regshow" mode="bottom" border-radius="16rpx"
		 :safe-area-inset-bottom="true">
		 	<view class="widths regbox">
		 		<view class="list">
		 			<view class="flex item">
		 				<view class="center lebel">
		 					<u-icon name="account" color="#d2e7ff" size="34"></u-icon>
		 					<text class="ml-6 c666">名稱</text>
		 				</view>
		 				<view class="val">
		 					<u-input class="input" :disabled="true" input-align="right" :show-confirmbar="false" v-model="userinfo.username" maxlength=32 type="text" placeholder="name" placeholder-style="color:#e0e0e0;font-size:24rpx;" />
		 				</view>
		 			</view>
		 			<view class="flex item">
		 				<view class="center lebel">
		 					<u-icon name="email" color="#d2e7ff" size="30"></u-icon>
		 					<text class="ml-10 c666">信箱</text>
		 				</view>
		 				<view class="val">
		 					<u-input class="input"  :disabled="true" input-align="right" :show-confirmbar="false" v-model="userinfo.email" maxlength=64 type="text" placeholder="email" placeholder-style="color:#e0e0e0;font-size:24rpx;" />
		 				</view>
		 			</view>
		 			<view class="flex item">
		 				<view class="center lebel">
		 					<u-icon name="phone" color="#d2e7ff" size="34"></u-icon>
		 					<text class="ml-10 c666">電話</text>
		 				</view>
		 				<view class="val">
		 					<u-input class="input"  :disabled="true" input-align="right" :show-confirmbar="false" v-model="userinfo.mobile" maxlength=10 type="text" placeholder="mobile" placeholder-style="color:#e0e0e0;font-size:24rpx;" />
		 				</view>
		 			</view>
		 			
		 			<view class="flex item">
		 				<view class="center lebel">
		 					<u-icon name="map" color="#d2e7ff" size="36"></u-icon>
		 					<text class="ml-10 c666">地址</text>
		 				</view>
		 				<view class="val">
		 					<u-input class="input"  :disabled="true" input-align="right" :show-confirmbar="false" v-model="userinfo.address" maxlength=100 type="text" placeholder="address" placeholder-style="color:#e0e0e0;font-size:24rpx;" />
		 				</view>
		 			</view>
					<view class="flex item">
						<view class="center lebel">
							<u-icon name="grid" color="#d2e7ff" size="36"></u-icon>
							<text class="ml-10 c666">公司</text>
						</view>
						<view class="val">
							<u-input class="input"  :disabled="true" input-align="right" :show-confirmbar="false" v-model="userinfo.companyname" maxlength=100 type="text" placeholder="address" placeholder-style="color:#e0e0e0;font-size:24rpx;" />
						</view>
					</view>
					<view class="flex item">
						<view class="center lebel">
							<u-icon name="lock" color="#d2e7ff" size="36"></u-icon>
							<text class="ml-10 c666">權限</text>
						</view>
						<view class="val" >
							<u-input class="input" @click="showAction(userinfo,'edit')" :disabled="true" input-align="right" :show-confirmbar="false" v-model="userinfo.identName" maxlength=100 type="text" placeholder="address" placeholder-style="color:#e0e0e0;font-size:24rpx;" />
						</view>
					</view>
		 			
		 			
		 		</view>
		 		<!-- <view class="center btnbox">
		 			<view class="center cfff btn" @click="subReg">修改權限</view>
		 		</view> -->
		 	</view>
		 </u-popup>
		  
	</view>
</template>

<script>
	import { mapState, mapMutations } from "vuex";
	import { getUserList , setUserAuth , inOutCaseForUser, getMemberInfo, inOutCaseForUserNew, delUser, editorUserAuth } from "@/api/apis.js"
	import NavBar from "@/component/NavBar"
	import Tabar from "@/component/HomeTab"
	import ZPaging from "@/node_modules/z-paging/components/z-paging/z-paging.vue"
	export default {
		components:{
			NavBar,
			ZPaging,
			Tabar
		},
		data() {
			return {
				regshow:false,
				delshow:false,
				delId:0,
				curId:0,
				showType:1,
				confirmTips:false,
				tipContent:"",
				ident:1,
				nav:[
					{
						name: '設計師',
						ident:2,
					}, 
					{
						name: '客戶',
						ident:3,
					}, 
					{
						name: '管理層',
						ident:1,
					}, 
					{
						name: '審核',
						ident:0,
					}
				],
				keyword:"",
				current:0,
				list:[
				],
				actionUser:{},
				actionShow:false,
				actionIndex:0,
				tips: {
					text: '設定權限',
					color: '#999',
					fontSize: 24
				},
				
				actionList:[
					{
						text:'manager',
						color: '#007aff',
						fontSize: 28,
						id:1,
					},
					{
						text:'designer',
						color: '#007aff',
						fontSize: 28,
						id:2,
					},
					{
						text:'client',
						color: '#007aff',
						fontSize: 28,
						id:3,
					}
				],
				actionType:'in',
				options: [
					{
						text: 'Delete',
						style: {
							backgroundColor: '#ff0000',
							color:'#fff'
						}
					}
				],
				userinfo:{
					username:"",
					email:"",
					mobile:"",
					address:"",
				},
				userType:"",
			}
		},
		onShow(){
			// const userAgent = navigator.userAgent.toLowerCase();
			// const mobileKeywords = ["iphone", "android", "windows phone"];
			// const isMobile = mobileKeywords.some(keyword => userAgent.includes(keyword));
			// if(!isMobile){
			// 		this.$Toast("请在移动端打开应用")
			// 		setTimeout(()=>{
			// 			this.$navi({
			// 			    route:{
			// 			        name:"Home",
			// 			    },
			// 			})
			// 		},1200)
			
			// }
			this.setTabList(uni.getStorageSync("bindevice"))
			if(uni.getStorageSync("islogin")){
				this.$nextTick(()=>{
					this.ident = uni.getStorageSync('ident')
					if(uni.getStorageSync('caseid')){
						this.chageUserPageId(uni.getStorageSync('caseid'))
						this.chageUserPageType('admin')
					}else{
						this.chageUserPageType('action')
					}
					this.curId=this.userPageActionId;
					this.reload();
					
					if(this.userPageActionType==='admin'){
						this.showType=2
					}else{
						this.showType=1
						if(parseInt(uni.getStorageSync('ident'))===1){
							this.nav=[
								{
									name: '設計師',
									ident:2,
								}, 
								{
									name: '客戶',
									ident:3,
								}, 
								{
									name: '管理層',
									ident:1,
								}, 
								{
									name: '審核',
									ident:0,
								}
							]
						}else{
							this.nav=[
								{
									name: '設計師',
									ident:2,
								}, 
								{
									name: '客戶',
									ident:3,
								}, 
								{
									name: '管理層',
									ident:1,
								}
							]
						}
					}
				})
			}else{
				this.$Toast("請先登錄")
				setTimeout(()=>{
					this.toPage("Home")
				},1200)
			}
			
			
		},
		computed: {
			...mapState(["userPageActionType","userPageActionId"]),
		},
		mounted() {
			this.previousWidth = window.innerWidth;
			this.previousHeight = window.innerHeight;
			window.addEventListener('resize', this.handleResize);
		},
		beforeDestroy() {
		    window.removeEventListener('resize', this.handleResize);
		},
		onLoad() {
			
		},
		methods: {
			...mapMutations(['chageUserPageType','chageUserPageId','setTabList']),
			swipeAction(index,subindex){
				if(subindex===0){
					this.delId=this.list[index].id
					this.delshow=true
				}
			},
			handleResize(){
				const currentWidth = window.innerWidth;
				  const currentHeight = window.innerHeight;
			
				  if (currentWidth !== this.previousWidth || currentHeight !== this.previousHeight) {
					this.previousWidth = currentWidth;
					this.previousHeight = currentHeight;
					uni.getSystemInfo({
						success: function(res) {
							if (res.platform === 'windows' || res.platform === 'mac') {
								this.loginout()
								location.reload();
							}
						}
					});
					
				  }
			},
			loginout(){
				uni.removeStorageSync("uid");
				uni.removeStorageSync("userToken");
				uni.removeStorageSync("ident")
				uni.removeStorageSync("islogin")
				uni.removeStorageSync("name")
				uni.removeStorageSync("tabIndex")
				uni.removeStorageSync('caseid')
				uni.removeStorageSync("fileDir")
				this.$Toast("退出成功")
				setTimeout(()=>{
					//跳轉到登錄頁
					this.$navi({
					    route:{
					        name:'Home',
					    },
					})
				},1200)
				
			},
			open(index){
				this.list[index].show=true
				this.list.map((v,k)=>{
					if(index!=k) this.list[k].show = false
				})
			},
			showMemberInfo(id,ident,cid){
				let uid = uni.getStorageSync("uid");
				this.$Loading()
				getMemberInfo({id,uid,ident,cid}).then((res)=>{
					//修改
					uni.hideLoading()
					this.userinfo=res
					this.regshow=true
				}).catch(()=>{
					uni.hideLoading()
					if(err.code === 102){
						this.$ClearLogin(err.msg)
					}else{
						this.$Toast(err.msg)
					}
				})
			},
			subReg(){
				//提交修改用戶權限
			},
			delUserById(){
				// delUser
				if(this.delId<=0){
					return false;
				}
				let data = {
					id:this.delId,
					uid:uni.getStorageSync("uid"),
				}
				if(this.curId) data.caseid=this.curId
				delUser(data).then((res)=>{
					this.$Toast(res.msg)
					setTimeout(()=>{
						this.reload()
					},1200)
				}).catch((err)=>{
					if(err.code === 102){
						this.$ClearLogin(err.msg)
					}else{
						this.$Toast(err.msg)
					}
				})
			},
			toSearch(){
				this.reload()
			},
			inOutCase(type,userid,cid){
				this.actionType=type
				let filterident=this.nav[this.current].ident
				let data = {
					caseid:this.curId,
					userid:userid,
					uid:uni.getStorageSync("uid"),
					type,
					cid,
					ident:filterident
				}
				inOutCaseForUserNew(data).then((res)=>{
					this.$Toast(res.msg)
					setTimeout(()=>{
						this.reload()
					},1200)
				}).catch((err)=>{
					if(err.code === 102){
						this.$ClearLogin(err.msg)
					}else{
						this.$Toast(err.msg)
					}
				})
			},
			showAction(item,type=""){
				this.actionUser=item
				this.actionShow=true
				if(type){
					this.userType=type
				}else{
					this.userType=""
				}
			},
			changeNav(e){
				this.current=e
				this.reload()
			},
			queryList(pageNo,pageSize){
				let filterident=this.nav[this.current].ident
				let uid = uni.getStorageSync('uid')
				let ident = uni.getStorageSync('ident')
				let data={
					pageNo,
					pageSize,
					ident,
					uid,
					filterident
				}
				if(this.keyword) data.keyword=this.keyword;
				if(this.showType===2) data.caseid = this.curId;
				
				getUserList(data).then((res)=>{
					this.$refs.paging.complete(res)
				}).catch((err)=>{
					if(err.code === 102){
						this.$ClearLogin(err.msg)
					}else{
						this.$Toast(err.msg)
					}
				})
			},
			selectAction(e){
				this.actionIndex=e
				this.actionShow=false
				console.log(this.actionList[e])
				if(!this.userType){
					this.tipContent="確認將 "+this.actionUser.name+" 設置為 "+this.actionList[e].text+" 嗎?"
				}else{
					this.tipContent="確認將 "+this.userinfo.username+" 修改為 "+this.actionList[e].text+" 嗎?"
					if(this.actionList[e].id == this.userinfo.ident){
						this.$Toast("該用用戶已是"+this.actionList[e].text)
						return 
					}
				}
				this.confirmTips=true
				
			},
			reload(){
				this.$refs.paging.reload();
			},
			setUser(){
				let uid = uni.getStorageSync("uid");
				if(!this.userType){
					const data = {
						id:this.actionUser.id,
						ident:this.actionList[this.actionIndex].id,
						companyid:this.actionUser.companyid,
						uid,
					}
					setUserAuth(data).then((res)=>{
						this.$Toast(res.msg)
						setTimeout(()=>{
							this.reload()
						},1200)
					}).catch((err)=>{
						if(err.code === 102){
							this.$ClearLogin(err.msg)
						}else{
							this.$Toast(err.msg)
						}
					})
				}else{
					this.regshow=false
					//修改用戶權限
					this.$Loading()
					const data = {
						id:this.userinfo.id,
						ident:this.actionList[this.actionIndex].id,
						companyid:this.userinfo.companyid,
						uid:uni.getStorageSync("uid")
					}
					editorUserAuth(data).then((res)=>{
						uni.hideLoading()
						this.$Toast(res.msg)
						setTimeout(()=>{
							this.reload()
						},1200)
					}).catch((err)=>{
						uni.hideLoading()
						if(err.code === 102){
							this.$ClearLogin(err.msg)
						}else{
							this.$Toast(err.msg)
						}
					})
				}
				
				
			},
			toPage(name,params={}){
				this.$navi({
				    route:{
				        name,
						params
				    },
				})
			}
		}
	}
</script>

<style lang="scss">
	.content{
		min-height: 100vh;
	}
	.navbox{
		width: 70vw;
		margin: 0 auto;
		/deep/ .u-item{
			position: relative;
			&::after{
				content:"";
				width: 2rpx;
				height: 32rpx;
				background-color: #f1f1f1;
				position: absolute;
				right: 0rpx;
			}
			&.u-item-3::after{
				display: none;
			}
		}
		/deep/ .u-item-bg{
			box-shadow: 0rpx 4rpx 4rpx rgba(0,0,0,.1);
		}
	}
	.search{
		padding: 20rpx 0;
	}
	.list{
		/deep/ .u-btn-text{
			color: #fff !important;
		}
		.items{
			padding: 20rpx 0;
			border-bottom: 2rpx dashed #eaf1f9;
			.left{
				width: calc(100% - 160rpx);
				margin-right: 20rpx;
			}
			.right{
				width: 140rpx;
				flex-shrink: 0;
				.btn{
					width: 140rpx;
					height: 54rpx;
					background-color: #007aff;
					border-radius: 10rpx;
					box-shadow: 2rpx 2rpx 6rpx rgba(9,100,199,1);
				}
				
			}
		}
	}
	.regbox{
		padding: 30rpx 20rpx;
		border-radius: 16rpx 16rpx 0 0;
		.list{
			.item{
				width: 100%;
				padding: 4rpx 0;
				border-bottom: 2rpx solid #f9f9f9;
				.lebel{
					width: 120rpx;
					position: relative;
					// padding-left: 20rpx;
					// &::before{
					// 	content: "";
					// 	width: 8rpx;
					// 	height: 34rpx;
					// 	background-color: #007aff;
					// 	display: inline-block;
					// 	border-radius: 8rpx;
					// 	position: absolute;
					// 	left: 0;
					// 	top:2rpx;
					// 	box-shadow: 2rpx 2rpx 4rpx rgba(0, 0, 0, .15);
					// }
				}
				.val{
					width: calc(100% - 130rpx);
					margin-left: 10rpx;
				}
			}
		}
		.btnbox{
			padding: 120rpx 0 180rpx 0;
			.btn{
				background: linear-gradient(#007aff,#0e6ce1);
				width: 200rpx;
				height: 70rpx;
				border-radius: 10rpx;
			}
		}
		
	}
</style>
